<template>
  <view class="chooce-box" v-if="show">
    <view
      class="box"
      v-for="(item,index) in dayList"
      :key="index"
      @tap.stop="handleChange(index)"
    >
      <view class="checkbox">
        <image src='/static/checkbox.png'  v-if='!item.status'></image>
        <image src='/static/checkbox-c.png' v-if='item.status'></image>
      </view>
      <view>{{item.title}}</view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      dayList: [
        {
          title: '每周日',
          val: 1,
          status: false
        },
        {
          title: '每周一',
          val: 2,
          status: false
        }, {
          title: '每周二',
          val: 3,
          status: false
        }, {
          title: '每周三',
          val: 4,
          status: false
        }, {
          title: '每周四',
          val: 5,
          status: false
        }, {
          title: '每周五',
          val: 6,
          status: false
        }, {
          title: '每周六',
          val: 7,
          status: false
        }
      ]
    }
  },
  props:{
    show:{
      type:Boolean,
      default:false
    },
    week:{
      type:Array,
      default:[]
    }
  },
  mounted() {
   this.week.forEach((item,index)=>{
     this.dayList[parseInt(item)-1].status=true
   })
  },
  methods: {
    handleChange (index) {
      this.dayList[index].status = !this.dayList[index].status
      let propArray = []
      for (const item of this.dayList) {
        if (item.status === true) {
          propArray.push(item.val)
        }
      }
      this.$emit('change', propArray)

    }
  },
}
</script>

<style lang="scss" scoped>
.chooce-box::after{
  position: absolute;
  top: -30rpx;
  right: 40rpx;
  content: '';
  border-width:8px 8px 10px 8px;
  border-style:solid;
  border-color: transparent  transparent #ffffff transparent;
  
}
.chooce-box {
  position: absolute;
  border-radius: 5rpx;
  top: 100rpx;
  background-color: #ffffff;
  right: 32rpx;
  box-shadow: 2rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
  .box {
    display: flex;
    align-items: center;
    padding: 16rpx 40rpx;
    border-bottom: 1rpx solid rgba(229, 229, 229, 1);
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;

    color: rgba(80, 80, 80, 1);
    .checkbox {
      margin-right: 8rpx;
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
</style>